<template>
  <el-container>
    <el-header class="restaurant-header">
      <h2>{{ restaurant.name }}</h2>
      <el-button type="text" @click="goBack" class="back-button">返回首页</el-button>
    </el-header>

    <el-main>

      <el-image :src="restaurant.image" fit="cover" class="restaurant-banner" />


      <div class="section">
        <h3 class="section-title">菜品列表</h3>
        <el-table :data="restaurant.menu" border style="width: 50%;">
          <el-table-column prop="name" label="菜品名称" />
          <el-table-column prop="price" label="价格" />
          <el-table-column label="图片">
            <template #default="scope">
              <el-image
                  :src="scope.row.image"
                  style="width: 100px; height: auto;"
                  class="menu-image"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                  size="mini"
                  type="primary"
                  @click="addToFavorites(scope.row.name)"
              >
                加入收藏
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>


      <div class="section">
        <h3 class="section-title">用户评分与评价</h3>
        <el-row :gutter="20">
          <el-col :span="12" v-for="review in restaurant.reviews" :key="review.id">
            <el-card shadow="hover" class="review-card">
              <p><strong>{{ review.user }}</strong>：{{ review.comment }}</p>
              <div class="rating">
                <el-rate :value="review.rating" disabled />
                <span class="rating-text">({{ review.rating }}/5)</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      restaurant: {
        name: "付飞扬的火锅店",
        image: "./src/assets/shopimg1.png",
        menu: [
          { name: "菜品1", price: "￥50", image: "./src/assets/cuisineimg1.png" },
          { name: "菜品2", price: "￥80", image: "./src/assets/cuisineimg2.png" },
        ],
        reviews: [
          { id: 1, user: "用户1", comment: "非常美味！", rating: 5 },
          { id: 2, user: "用户2", comment: "环境不错。", rating: 4 },
        ],
      },
    };
  },
  methods: {
    addToFavorites(dishName) {
      this.$message.success(`已将 ${dishName} 加入收藏！`);
    },
    goBack() {
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>

.restaurant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e5e5e5;
}

.restaurant-header h2 {
  margin: 0;
  font-size: 1.8em;
  color: #333;
}

.back-button {
  color: #42a5f5;
  font-size: 1em;
}


.restaurant-banner {
  margin-bottom: 40px; 
  width: 100%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
}

.section {
  margin-top: 20px;
  padding: 10px 0;
}

.section-title {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #333;
  border-left: 5px solid #42a5f5;
  padding-left: 10px;
}


.menu-image {
  border-radius: 5px;
  transition: transform 0.3s;
}

.menu-image:hover {
  transform: scale(1.1);
}


.review-card {
  padding: 20px;
  border-radius: 10px;
  background: #f9f9f9;
  transition: transform 0.3s;
}

.review-card:hover {
  transform: translateY(-5px);
}

.rating {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.rating-text {
  margin-left: 10px;
  color: #666;
  font-size: 0.9em;
}
</style>
